<template>
  <view class="wrap" v-if="showPage">
    <!-- <uv-navbar leftText="" title="" leftIconColor='#FFFFFF' bgColor='rgba(0,0,0,0)' fixed safeAreaInsetTop autoBack titleStyle='color: #000000'>
      <template v-slot:right>
        <view class="nav-right" @click="nowShare([1,2,3,4,6])">
          <image src="../../static/share.png" class="img"></image>
        </view>
      </template>
    </uv-navbar>
    <view class="video" @click="goLiveDetail">
      <image :src="setUrl(detail.thumb)" mode="aspectFill" class="img"></image>
      <view class="overlay"></view>
      <view class="start" v-if="detail.status == 2 || detail.status == 3 || detail.status == 4">{{ timeStr }}</view>
      <view class="start" v-if="detail.status == 1">直播回放已下线 看看其他的吧</view>
    </view>
    <view class="box">
      <view class="title"><text class="desc">{{ typeList[detail.join_permission] }}</text>  {{ detail.title }}</view>
      <view class="center">
        <view class="time">{{ detail.start_at }}</view>
        <view class="like" @click="callLike(detail)">
          <image src="../../static/tip1-1.png" class="img" v-if="detail.isCollect"></image>
          <image src="../../static/tip1.png" class="img" v-else></image>
        </view>
      </view>
      <uv-line color="#EFEFEF"></uv-line>
      <view class="user" v-if="detail.promoter" @click="goUser(detail.promoter)">
        <view class="left">
          <avatar :src='setUrl(detail.promoter.avatar)' styles="width: 84rpx; height: 84rpx;"></avatar>
          <view class="heys">
            <view class="name">{{ detail.promoter.nickname }}</view>
            <view class="summary">{{ detail.promoter.bio }}</view>
          </view>
        </view>
        <view class="right" :class="{ active: detail.promoter.isFollow }" @click.stop="followUser(detail.promoter)">{{ detail.promoter.isFollow ? '取关' : '关注' }}</view>
      </view>
      <view class="filed" v-if="detail.document_name">
        <view class="call" @click="downFile">
          <view class="flieIcon">{{ setUrl(detail.document_url).substring(setUrl(detail.document_url).lastIndexOf(".") + 1) }}</view>
          <view class="name">{{ detail.document_name }}</view>
        </view>
      </view>
      <view class="content">
        <uv-parse :content="detail.profile"></uv-parse>
      </view>
    </view>
    <template v-if="detail.join_permission == 2"> -->
      <!-- 需要报名，是否已报名，是否收费，购买日志，是否需要审核，报名审核状态
      需要报名&&未报名&&需要收费&&未购买 || 
      需要报名&&已报名&&需要收费&&未购买 ||
      需要报名&&已报名&&需要收费&&已购买&&需要审核&&审核状态!=1 ||
      需要报名&&已报名&&不需要收费&&需要审核&&审核状态!=1 ||
      不需要报名&&需要收费&&未购买
      (detail.need_enroll && !detail.isEnroll && !detail.is_free && detail.buyLog == null) || 
      (detail.need_enroll && detail.isEnroll && !detail.is_free && detail.buyLog == null) || 
      (detail.need_enroll && detail.isEnroll && !detail.is_free && detail.buyLog && detail.need_examine && detail.enrollStatus != 1) || 
      (detail.need_enroll && detail.isEnroll && detail.is_free && detail.need_examine && detail.enrollStatus != 1) || 
      (!detail.need_enroll && !detail.is_free && detail.buyLog == null)
      
      if (
        (detail.need_enroll && !detail.is_free && detail.buyLog === null) || (detail.need_enroll && detail.isEnroll && !detail.is_free && (!detail.buyLog || (detail.need_examine && detail.enrollStatus !== 1))) || (!detail.need_enroll && !detail.is_free && detail.buyLog === null)
      ) {
        // 你的逻辑处理代码
      } -->

      <!-- <template v-if="(detail.need_enroll && !detail.is_free && detail.buyLog === null) || (detail.need_enroll && detail.isEnroll && !detail.is_free && (!detail.buyLog || (detail.need_examine && detail.enrollStatus !== 1))) || (!detail.need_enroll && !detail.is_free && detail.buyLog === null)">
        <view class="footer">
          <view class="pox">
            <button class="btn" @click="goSign">仅机构企业、从业者可报名</button>
          </view>
          <uv-safe-bottom></uv-safe-bottom>
        </view>
      </template>
    </template>
    <template v-else>
      <template v-if="(detail.need_enroll && !detail.is_free && detail.buyLog === null) || (detail.need_enroll && detail.isEnroll && !detail.is_free && (!detail.buyLog || (detail.need_examine && detail.enrollStatus !== 1))) || (!detail.need_enroll && !detail.is_free && detail.buyLog === null)">
        <view class="footer">
          <view class="pox">
            <view class="left" v-if="detail.is_free">免费</view>
            <view class="left" v-else>{{ detail.price }}投研币</view>
            <button class="btn" hover-class="none" @click="goSign">申请查看</button>
          </view>
          <uv-safe-bottom></uv-safe-bottom>
        </view>
      </template>
    </template> -->
    
    
    
    
    
    
    
    
    
    
    <!-- #ifdef WEB -->
    <uv-status-bar></uv-status-bar>
    <view class="appNav">
      <view class="left">
        <view class="logo"><image src="../../static/logo.png" class="img"></image></view>
        <view class="name">投研宝</view>
      </view>
      <button hover-class="none" class="btn" @click="goApp">去app查看</button>
    </view>
    <uv-line color="#EFEFEF"></uv-line>
    <!-- #endif -->
    <!-- #ifdef APP-PLUS -->
    <uv-navbar leftText="" title="" leftIconColor='#FFFFFF' bgColor='rgba(0,0,0,0)' fixed safeAreaInsetTop autoBack titleStyle='color: #000000'>
      <template v-slot:right>
        <view class="nav-right" @click="nowShare([1,2,3,4,6])">
          <image src="../../static/share.png" class="img"></image>
        </view>
      </template>
    </uv-navbar>
    <!-- #endif -->
    <view class="video" @click="goLiveDetail">
      <image :src="setUrl(detail.thumb)" mode="aspectFill" class="img"></image>
      <view class="overlay"></view>
      <view class="start" v-if="detail.status == 2 || detail.status == 3 || detail.status == 4">{{ timeStr }}</view>
      <view class="start" v-if="detail.status == 1">直播回放已下线 看看其他的吧</view>
    </view>
    <view class="box">
      <view class="title"><text class="desc">{{ typeList[detail.join_permission] }}</text>  {{ detail.title }}</view>
      <view class="center">
        <view class="time">{{ detail.start_at }}</view>
        <view class="like" @click="callLike(detail)">
          <image src="../../static/tip1-1.png" class="img" v-if="detail.isCollect"></image>
          <image src="../../static/tip1.png" class="img" v-else></image>
        </view>
      </view>
      <uv-line color="#EFEFEF"></uv-line>
      <view class="user" v-if="detail.promoter" @click="goUser(detail.promoter)">
        <view class="left">
          <avatar :src='setUrl(detail.promoter.avatar)' styles="width: 84rpx; height: 84rpx;"></avatar>
          <view class="heys">
            <view class="name">{{ detail.promoter.nickname }}</view>
            <view class="summary">{{ detail.promoter.bio }}</view>
          </view>
        </view>
        <!-- #ifdef APP-PLUS -->
        <view class="right" :class="{ active: detail.promoter.isFollow }" @click.stop="followUser(detail.promoter)">{{ detail.promoter.isFollow ? '取关' : '关注' }}</view>
        <!-- #endif -->
      </view>
      <view class="filed" v-if="detail.document_name && detail.document_url">
        <view class="call" @click="downFile">
          <view class="flieIcon">{{ setUrl(detail.document_url).substring(setUrl(detail.document_url).lastIndexOf(".") + 1) }}</view>
          <view class="name">{{ setUrl(detail.document_url) }}</view>
        </view>
      </view>
      <view class="content">
        <uv-parse :content="detail.profile"></uv-parse>
      </view>
    </view>
    <!-- #ifdef APP-PLUS -->
    <template v-if="detail.join_permission == 2">
      <template v-if="detail.need_enroll && (!detail.isEnroll || (detail.isEnroll && detail.need_examine && detail.enrollStatus == 2)) || (!detail.is_free && detail.buyLog == null)">
        <view class="footer">
          <view class="pox">
            <button class="btn" hover-class="none" @click="goSign">仅机构企业、从业者可报名</button>
          </view>
          <uv-safe-bottom></uv-safe-bottom>
        </view>
      </template>
      <template v-if='detail.enrollStatus == 0'>
        <view class="footer">
          <view class="pox">
            <button class="btn" hover-class="none" disabled>审核中</button>
          </view>
          <uv-safe-bottom></uv-safe-bottom>
        </view>
      </template>
    </template>
    <template v-else>
      <template v-if="detail.need_enroll && (!detail.isEnroll || (detail.isEnroll && detail.need_examine && detail.enrollStatus == 2)) || (!detail.is_free && detail.buyLog == null)">
        <view class="footer">
          <view class="pox">
            <button class="btn" hover-class="none" @click="goSign">申请查看</button>
          </view>
          <uv-safe-bottom></uv-safe-bottom>
        </view>
      </template>
      <template v-if='detail.enrollStatus == 0'>
        <view class="footer">
          <view class="pox">
            <button class="btn" hover-class="none" disabled>审核中</button>
          </view>
          <uv-safe-bottom></uv-safe-bottom>
        </view>
      </template>
    </template>
    <!-- #endif -->
    <!-- #ifdef WEB -->
    <view class="footer">
      <view class="pox">
        <button class="btn" @click="goApp">去APP查看</button>
      </view>
      <uv-safe-bottom></uv-safe-bottom>
    </view>
    <!-- #endif -->
    
    <view class="safe"></view>
    <uv-safe-bottom></uv-safe-bottom>
    
    <share ref="onShare" :show='showLeng' @click="getShare"></share>
  </view>
</template>

<script setup>
import logoImage from '@/static/logo.png';
import { setUrl, checkServe, toast } from '@/common';
import { onLoad, onHide, onShow } from '@dcloudio/uni-app';
import { get, post } from '@/api';
import { ref } from 'vue';

const onShare = ref(null);
const typeList = ref({
  1: '专场',
  2: '机构',
  3: '公开'
})
let id = '';
let detail = ref({});
let timeStr = ref('');
let showPage = ref(false);
let isPage = false;
let isAuth = ref(false);
let interval = null;
let showLeng = ref([]);

onLoad((option) => {
  id = option.id;
  getData();
})
onShow(() => {
  if(isPage){
    isPage = false;
    getData();
  }
})
onHide(() => {
  isPage = true;
})

function getData(){
  get('/api/Live/getLessonLiveDetails', { lessonLiveId: id }).then(res => {
    if(res.code == 1){
      const data = res.data;
      detail.value = data;
      showPage.value = true;
      interval = null;
      if(data.status == 2 || data.status == 3 || data.status == 4){
        updateLiveStatus(data.start_at, data.end_at);
      }
      if(data.join_permission == 2) infoAuth();
      
    }
  })
}
// 查询用户是否已进行身份认证
function infoAuth(){
  // #ifdef WEB
  // return;
  // #endif
  post('api/user/getIdentityAuthInfo').then(res => {
    if(res.code == 1){
      const data = res.data;
      isAuth.value = data ? true : false;
    }
  })
}
// 收藏
function callLike(row){
  // #ifdef WEB
  // return;
  // #endif
  post('/api/Live/collectLessonLive', { lessonLiveId: id }).then(res => {
    if(res.code == 1){
      const data = res.data;
      row.isCollect = data;
    }
  })
}
// 关注
function followUser(row){
  // #ifdef WEB
  return;
  // #endif
  const params = {
    follow_user_id: row.id,
    way: row.isFollow ? 2 : 1
  }
  post('api/user_follow/followUser', params).then(res => {
    if(res.code == 1){
      row.isFollow = row.isFollow == 1 ? 0 : 1;
    }
  })
}
function downFile(){
  // #ifdef WEB
  return;
  // #endif
  if(!detail.value.document_url) return;
  if(detail.value.need_enroll && (!detail.value.isEnroll || (detail.isEnroll && detail.value.need_examine && detail.value.enrollStatus == 2)) || (!detail.value.is_free && detail.value.buyLog == null) || detail.value.enrollStatus == 0) return toast('无权限查看');
  uni.downloadFile({
    url: setUrl(detail.value.document_url),
    success: function (res) {
      var filePath = res.tempFilePath;
      uni.openDocument({
        filePath: filePath,
        showMenu: true,
        success: function (res) {
          console.log('打开文档成功');
        }
      });
    }
  });
}
function updateLiveStatus(startTime, endTime) {
  const start = new Date(startTime).getTime();
  const end = new Date(endTime).getTime();

  interval = setInterval(() => {
    const now = new Date().getTime();
    if (now < start) {
      const distance = start - now;
      const hours = Math.floor(distance / (1000 * 60 * 60));
      const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = Math.floor((distance % (1000 * 60)) / 1000);
      timeStr.value = `倒计时\n${hours}时${minutes}分${seconds}秒`;
    } else if (now >= start && now <= end) {
      clearInterval(interval);
      timeStr.value = '正在直播';
    } else {
      clearInterval(interval);
      timeStr.value = '直播已结束';
    }
  }, 1000);
}
function nowShare(row){
  showLeng.value = row;
  onShare.value.open();
}
// 分享
function getShare(row){
  if(row.id == 5) toast('开发中...');
  
  let title = detail.value.title;
  let summary = detail.value.profile;
  let href = `${uni.$uv.http.config.webUrl}/pages/group/themeDetail?id=${id}`;
  let imageUrl = detail.value.thumb ? setUrl(detail.value.thumb) : logoImage;
  
  if(row.id == 6) {
    uni.setClipboardData({
      data: href,
      success: function () {
        toast('复制成功');
      }
    });
    onShare.value.close();
    return;
  }
  function goShare(){
    let scene = {
      1: 'WXSceneSession',
      2: 'WXSceneTimeline'
    }
    uni.share({
      provider: row.share,
      scene: scene[row.id],
      type: 0,
      href,
      title,
      summary,
      imageUrl,
      success(res) {
        console.log(JSON.stringify(res));
        console.log('分享成功');
        const params = {
          type: 2,
          target_id: detail.value.id,
          share_user_id: userInfo.user_id
        }
        getAddScore(params, '分享成功');
      },
      fail(err) {
        console.log(JSON.stringify(err));
        console.log('分享失败');
      },
      complete() {
        console.log('初始化');
      }
    })
  }
  onShare.value.close();
  checkServe('share', row.share, goShare);
}
function goSign(){
  if(detail.value.join_permission == 2){
    if(!isAuth.value) return; // 未进行身份认证
  }
  if(detail.value.need_enroll){
    uni.navigateTo({
      url: `/pages/research/sign?id=${id}&free=${detail.value.is_free}`
    });
  }else{
    uni.navigateTo({
      url: `/pages/research/cashier2?id=${id}`
    });
  }
}
function goUser(row){
  // #ifdef WEB
  return;
  // #endif
  let type = detail.value.type;
  let url = type == 1 ? `/pages/mine/myTheme/index?id=${row.id}` : `/pages/mine/official/index?id=${row.id}`;
  
  uni.navigateTo({
    url
  });
}
function goLiveDetail(){
  // #ifdef WEB
  return;
  // #endif
  if(!detail.value.polyv_channel_id) return toast('未配置直播间，请联系管理员');
  if(detail.value.need_enroll && (!detail.value.isEnroll || (detail.isEnroll && detail.value.need_examine && detail.value.enrollStatus == 2)) || (!detail.value.is_free && detail.value.buyLog == null) || detail.value.enrollStatus == 0) return toast('请先申请查看')
  uni.navigateTo({
    url: `/pages/research/live?id=${detail.value.polyv_channel_id}`
  });
}
// 跳转app
function goApp(){
  // #ifdef WEB
  var userAgent = navigator.userAgent.toLowerCase();
  if (userAgent.indexOf('micromessenger') !== -1) {
    msg = '请点击右上角，在浏览器打开';
    modal.value.open();
  } else {
    let route = `/pages/research/liveDetail?id=${id}`
    location.href = 'touyanbao://' + route
    noApp();
  }
  // #endif
}
// 无响应或者没安装跳转下载
let timer = null;
function noApp() {
	console.log("===========》noApp");
	var t = Date.now(),
		r = 'https://www.xcxwo.com/QfvDcS';
	timer = setTimeout(function() {
    console.log(document.hidden);
    console.log(document.webkitHidden);
		return Date.now() - t > 3200 ? (clearTimeout(timer), !1) : !document.webkitHidden &&!document.hidden &&void(location.href = r);
	}, 3000);
}
</script>

<style lang="scss" scoped>
  .appNav{
    padding: 0 30rpx;
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left{
      display: flex;
      align-items: center;
      .logo{
        width: 60rpx;
        height: 60rpx;
        font-size: 0;
        border-radius: 10rpx;
        overflow: hidden;
      }
      .name{
        font-weight: 400;
        font-size: 32rpx;
        color: #2B2B2B;
        padding-left: 20rpx;
      }
    }
    .btn{
      width: 200rpx;
      height: 60rpx;
      line-height: 60rpx;
    }
  }
  .safe{
    width: 100%;
    height: 150rpx;
  }
  .footer{
    width: 100%;
    background-color: #fff;
    padding: 0 30rpx;
    padding-top: 16rpx;
    padding-bottom: 30rpx;
    position: fixed;
    left: 0;
    bottom: 0;
    .pox{
      display: flex;
      align-items: center;
      .btn{
        flex: 1;
        height: 72rpx;
        line-height: 72rpx;
        border-radius: 72rpx;
      }
      .left{
        flex: 1;
        font-weight: 500;
        font-size: 30rpx;
        color: #E43222;
      }
    }
  }
  .box{
    padding: 0 30rpx;
    .content{
      padding-top: 30rpx;
    }
    .filed{
      width: 100%;
      margin-top: 20rpx;
      .call{
        background-color: #F5F5F5;
        border-radius: 12rpx;
        padding-right: 20rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin-right: 12rpx;
        .flieIcon{
          width: 100rpx;
          height: 100rpx;
          padding: 10rpx;
          font-size: 30rpx;
          color: #FFFFFF;
          background-color: #E55D52;
          border-radius: 10rpx;
          margin-right: 10rpx;
          padding-bottom: 16rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .name{
          font-weight: 400;
          font-size: 28rpx;
          color: #2B2B2B;
          width: 0;
          flex: 1;
          padding-right: 30rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
    .user{
      width: 100%;
      padding-top: 30rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .right{
        width: 106rpx;
        height: 48rpx;
        line-height: 48rpx;
        background-image: linear-gradient(90deg, #FF632E 0%, #FFB67A 99%);
        box-shadow: 0 5rpx 11rpx 0 #ffb36d8c;
        border-radius: 6rpx;
        font-weight: 500;
        font-size: 26rpx;
        color: #FFFFFF;
        text-align: center;
        &.active{
          background-image: linear-gradient(90deg, #A89A95 0%, #D5C3B5 100%);
          box-shadow: 0 5rpx 11rpx 0 #b0aba68c;
        }
      }
      .left{
        display: flex;
        align-items: center;
        .heys{
          padding-left: 16rpx;
          .summary{
            font-weight: 400;
            font-size: 22rpx;
            color: #A8A8A8;
          }
          .name{
            font-weight: 500;
            font-size: 26rpx;
            color: #000000;
          }
        }
      }
    }
    .center{
      width: 100%;
      padding-top: 26rpx;
      padding-bottom: 50rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .like{
        width: 40rpx;
        height: 37rpx;
        font-size: 0;
      }
      .time{
        font-weight: 400;
        font-size: 24rpx;
        color: #5E5E5E;
      }
    }
    .title{
      font-weight: 400;
      font-size: 28rpx;
      color: #000000;
      padding-top: 26rpx;
      .desc{
        height: 44rpx;
        line-height: 44rpx;
        border-radius: 44rpx;
        padding: 0 20rpx;
        background: #94949414;
        font-weight: 400;
        font-size: 24rpx;
        color: #000000;
        margin-right: 8rpx;
        text-align: center;
      }
    }
  }
  .video{
    width: 100%;
    height: 442rpx;
    background-color: #F5F5F5;
    position: relative;
    overflow: hidden;
    .start{
      font-size: 32rpx;
      font-weight: 700;
      color: #FFFFFF;
      text-align: center;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 100%;
    }
    .overlay{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba($color: #000000, $alpha: .4);
    }
  }
  .nav-right{
    width: 40rpx;
    height: 40rpx;
    font-size: 0;
  }
</style>